<script setup lang="ts">
import { ref } from 'vue'

definePage({
  name: 'login',
  style: {
    navigationBarTitleText: '登录',
    navigationStyle: 'custom',
  },
})

const userStore = useUserStore()
const username = ref('') // 预设值方便测试
const password = ref('') // 预设值方便测试
const loading = ref(false)

async function handleLogin() {
  if (loading.value)
    return
  loading.value = true
  try {
    let code = null
    // #ifdef MP-WEIXIN
    const loginRes = await uni.login({
      provider: 'weixin',
    })
    code = loginRes.code
    // #endif

    await userStore.login(username.value, password.value, code)

    // 登录成功后，可以进行页面跳转等操作
    setTimeout(() => {
      uni.switchTab({ url: '/pages/index/index' })
    }, 1000)
  }
  catch (error) {
    console.error('登录失败', error)
  }
  finally {
    loading.value = false
  }
}
</script>

<template>
  <view class="login-page">
    <view class="aurora-background">
      <view class="aurora-shape aurora-shape1" />
      <view class="aurora-shape aurora-shape2" />
      <view class="aurora-shape aurora-shape3" />
    </view>
    <view class="login-container">
      <view class="title">
        Welcome
      </view>
      <view class="subtitle">
        Sign in to your account1
      </view>
      <wd-cell-group borderless custom-class="input-group">
        <wd-input
          v-model="username"
          placeholder="请输入用户名"
          clearable
          prefix-icon="user-circle"
          custom-class="login-input"
        />
        <wd-input
          v-model="password"
          placeholder="请输入密码"
          clearable
          show-password
          prefix-icon="lock-on"
          custom-class="login-input"
        />
      </wd-cell-group>
      <wd-button block size="large" custom-class="login-btn" :loading="loading" @click="handleLogin">
        登 录
      </wd-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.login-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: linear-gradient(to bottom, #43cea2, #185a9d);
}

.login-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>');
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.aurora-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.aurora-shape {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: overlay;
  animation: aurora-animation 10s infinite alternate;
  opacity: 0;
}

.aurora-shape1 {
  width: 600rpx;
  height: 600rpx;
  background: radial-gradient(circle, rgba(67, 206, 162, 0.3) 0%, rgba(67, 206, 162, 0) 70%);
  top: 5%;
  left: 10%;
  animation-duration: 12s;
}

.aurora-shape2 {
  width: 700rpx;
  height: 700rpx;
  background: radial-gradient(circle, rgba(24, 90, 157, 0.3) 0%, rgba(24, 90, 157, 0) 70%);
  top: 30%;
  right: 5%;
  animation-duration: 15s;
  animation-delay: -3s;
}

.aurora-shape3 {
  width: 500rpx;
  height: 500rpx;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 70%);
  bottom: 10%;
  left: 15%;
  animation-duration: 14s;
  animation-delay: -6s;
}

@keyframes aurora-animation {
  0% {
    transform: scale(1) translate(0, 0) rotate(0deg);
    opacity: 0.2;
  }
  100% {
    transform: scale(1.8) translate(40rpx, -40rpx) rotate(90deg);
    opacity: 0.5;
  }
}

.login-container {
  position: relative;
  z-index: 1;
  width: 70%;
  max-width: 700rpx;
  padding: 40rpx 50rpx;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 30rpx;
  backdrop-filter: blur(30rpx);
  -webkit-backdrop-filter: blur(30rpx);
  border: 2rpx solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 16rpx 64rpx 0 rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.title {
  font-size: 52rpx;
  font-weight: bold;
  color: #ffffff;
  text-align: left;
}

.subtitle {
  font-size: 30rpx;
  color: rgba(255, 255, 255, 0.7);
  text-align: left;
  margin-top: -15rpx;
  margin-bottom: 20rpx;
}

.input-group {
  background: transparent;

  :deep(.login-input) {
    position: relative;
    background: transparent !important;
    --wot-input-background: transparent !important;
    border-radius: 0;
    margin-bottom: 36rpx;
    padding: 16rpx 0;
    border: none;
    border-bottom: 2rpx solid rgba(255, 255, 255, 0.3);
    --wot-input-value-color: #ffffff;
    --wot-input-placeholder-color: rgba(255, 255, 255, 0.75);
    --wot-input-prefix-icon-color: rgba(255, 255, 255, 0.75);
    transition: border-color 0.3s ease;

    .wd-input__inner {
      color: #ffffff;
    }

    &.is-not-empty::after {
      background-color: rgba(255, 255, 255, 0.3) !important;
    }

    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -2rpx;
      width: 100%;
      height: 2rpx;
      background-image: linear-gradient(to right, #185a9d, #43cea2 50%, #185a9d);
      background-size: 0 100%;
      background-position: center;
      background-repeat: no-repeat;
      transition: background-size 0.5s ease-in-out;
    }
  }

  :deep(.wd-input:focus-within) {
    border-bottom-color: transparent;

    &::after {
      background-size: 100% 100%;
      background-image: linear-gradient(to right, #185a9d, #43cea2 50%, #185a9d);
    }
  }
}

:deep(.wd-cell-group) {
  background: transparent !important;
}
:deep(.wd-cell-group__body) {
  background: transparent !important;
}

:deep(.wd-input__icon) {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

:deep(.wd-input__clear) {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

:deep(.wd-input__prefix) {
  background: transparent !important;
}

.login-btn {
  margin-top: 30rpx;
  border-radius: 100rpx;
  font-weight: 600;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 2rpx solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  backdrop-filter: blur(20rpx);
  -webkit-backdrop-filter: blur(20rpx);
  box-shadow: 0 8rpx 30rpx 0 rgba(0, 0, 0, 0.1);

  &:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.3);
  }

  &.is-loading {
    background: rgba(255, 255, 255, 0.2);
  }
}

:deep(.login-btn .wd-button__loading-text) {
  color: #ffffff;
}

:deep(.login-btn .wd-loading__spinner) {
  --wot-loading-color: #ffffff;
}

@keyframes shimmer {
  0% {
    background-position: -2000rpx 0;
  }
  100% {
    background-position: 2000rpx 0;
  }
}

:deep(.login-btn.is-loading .wd-button__text) {
  display: none;
}

:deep(.login-btn.is-loading::before) {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-repeat: no-repeat;
  background-size: 400rpx 100%;
  animation: shimmer 2s infinite linear;
}
</style>
